<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="LightTextureVS" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform mat4 u_PvM4;
    uniform mat4 u_ModelM4;
    void main(){
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
        gl_PointSize = 30.0;
    }
</script>
<script id="LightTextureFS" type="x-shader/x-fragment">
    precision mediump float;
    void main(){
        gl_FragColor = vec4(vec3(gl_FragCoord.z), 1.0);
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Poly from '../js/Poly4.js'
    import Control from '../js/Control.js'

    import Geo from '../js/Poly2/Geo.js'
    import Mat from '../js/Poly2/Mat.js'
    import Obj3D from '../js/Poly2/Obj3D.js'
    import Scene from '../js/Poly2/Scene.js'



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl", { antialias: true, });

    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);//去图片描边
    gl.enable(gl.DEPTH_TEST);
    //#endregion

    //灯光贴图的program
    const lightProgram = CreateProgram(gl,
        document.querySelector('#LightTextureVS').innerText,
        document.querySelector('#LightTextureFS').innerText);

    //灯光
    const light = new PerspectiveCamera(60, canvas.width / canvas.height, 0.1, 10);
    light.position.set(0, 0.5, 0);
    light.lookAt(0, 0, 0.0);
    light.updateMatrixWorld(true);
    const lightPvM4 = light.projectionMatrix.clone().multiply(light.matrixWorldInverse);

    //摄像机
    const camera = new PerspectiveCamera(45, canvas.width / canvas.height, 0.1, 10);
    camera.position.set(0, 0.5, 0);
    camera.lookAt(0, 0, 0);
    camera.updateMatrixWorld(true);
    const cameraPvM4 = camera.projectionMatrix.clone().multiply(camera.matrixWorldInverse);

    //三角形对象
    const triangleH = 0.1;
    const triangle = [
        -0.1, triangleH, 0.1,
        0.1, triangleH, 0.1,
        0.0, triangleH, -0.1,
    ];

    const floorH = 0.0;
    //投影的平面对象
    const floor = [
        -0.2, 0.0, 0.2,
        0.2, 0.0, 0.2,
        -0.2, 0.0, -0.2,
        0.2, 0.0, -0.2,
    ];

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    setMatrix(lightProgram, lightPvM4, new Matrix4());

    draw(lightProgram, triangle);
    draw(lightProgram, floor);




    function draw(program, position) {
        gl.useProgram(program);
        const a_Position = gl.getAttribLocation(program, 'a_Position');
        const buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(position), gl.STATIC_DRAW);
        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, position.length / 3);
    }

    function setMatrix(program, pvm4, mm4) {
        const u_PvM4 = gl.getUniformLocation(program, 'u_PvM4');
        const u_ModelM4 = gl.getUniformLocation(program, 'u_ModelM4');
        gl.useProgram(program);
        gl.uniformMatrix4fv(u_PvM4, false, pvm4.elements);
        gl.uniformMatrix4fv(u_ModelM4, false, mm4.elements);
    }

</script>

</html>